<template>
  <div>
    <div>
      <el-form inline>
        <el-form-item label="日期选择" style="width: 320px">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            placeholder="请选择创建时间"
            style="width: 320px"
            v-model="searchFrom.createdAt"
            @change="dateChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="DebounceGetTableList"
            >搜索</el-button
          >
          <sj-button custom-type="sinfo" @click="DebounceResetting"
            >重置</sj-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div>
      <pure-table
        class="mt-5"
        :data="tableData.data"
        :columns="initPureTableConfig(roleTableConfig)"
        
        border
        @selection-change="selectionChange"
        :isShowPag="false"
      >
        <template
          v-for="item in deviceinfo.structInfo"
          #[item.fieldAlias]="{ row }"
        >
          {{ row[item?.fieldAlias] }} {{ item?.unit }}
        </template>
        <!-- <template #action="{ row }">
          <el-space>
            <sj-link custom-type="sblue" :underline="false" @click="edit(row)">编辑</sj-link>
            <sj-link custom-type="sred" :underline="false" @click="deletes(row)">删除</sj-link>
          </el-space>
        </template> -->
      </pure-table>
      <div class="mt-5">
        <el-pagination
          v-model:current-page="searchFrom.page"
          v-model:page-size="searchFrom.limit"
          background
          :layout="PAGE_LAYOUT"
          :total="tableData.total"
          @size-change="getTableList"
          @current-change="getTableList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty, initPureTableConfig } from "@/utils/functions";
import { PAGE_LAYOUT } from "@/constant";
import { debounce } from "@pureadmin/utils";
import { getRealTimeList } from "@/api/screen/index";
import { ref, reactive } from "vue";
const tableData = reactive({
  data: [],
  total: 0
});
const props = defineProps({
  deviceId: {
    type: String,
    default: ""
  },
  deviceinfo: {
    type: Object,
    default: () => {}
  }
});
const searchFrom = reactive({
  page: 1,
  limit: 10,
  createdAt: [],
  startDate: "",
  endDate: ""
});
const selectionData = ref([]);
const selectionChange = data => {
  selectionData.value = data;
};
const dateChange = e => {
  searchFrom.startDate = e[0];
  searchFrom.endDate = e[1];
};
const roleTableConfig = ref([
  // { type: "selection", align: "left" }
]);
const tabtitleset = () => {
  roleTableConfig.value = [];
  props.deviceinfo.structInfo.forEach(item => {
    roleTableConfig.value.push({
      slot: item.fieldAlias,
      label: item.fieldName
    });
  });
  roleTableConfig.value.push({ prop: "CreatedAt", label: "创建时间",width: 160 });
};
tabtitleset();
const getTableList = () => {
  getRealTimeList({ deviceId: props.deviceId, ...searchFrom }).then(res => {
    if (res.code == 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
const defaultSearchForm = () => {
  return {
    createdAt: [],
    startDate: "",
    endDate: "",
    page: 1,
    limit: 10
  };
};
getTableList();
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchFrom, defaultSearchForm());
  getTableList();
};
const DebounceGetTableList = debounce(getTableList, 300);
const DebounceResetting = debounce(resetting, 1000, true);
// const roleTableConfig = [
//   { type: "selection", align: "left" },
//   { prop: "id", label: '编号', width:  100 },
//   { prop: "productName", label: "开启状态" },
//   { prop: "deviceSN", label: "电压(V)" },
//   { slot: "connectStatus", label: "电流(A)" },
//   { slot: "connectStatus", label: "采集时间" },
//   { slot: "action", label: "操作", width: 150, fixed: "right" }
// ];
</script>
